<template>
	<view>
		<view  class="u-flex u-margin-bottom-32 u-col-bottom">
			<view v-for="(data,index) in dataList " :key="index" class=" u-text-center u-position-relative ranking-king"
				:class="[{'fanpai':index!=1},{'fanOne':index==1},{'fanTwo':index==0},{'fanThree':index==2}]"
				@click="detail(data)">
				<view class="u-margin-top-30">
					<u-icon name="huangguan" custom-prefix="custom-icon" :color="iconColor(index)" size="38"></u-icon>
				</view>
				<view class="acvter u-flex u-row-center" :class="index!==1?'avatar-small':'avatar-big'" :style="{
					borderColor:iconColor(index)
				}">
					<item-image type="1" :img="data.avatar" :size="index!==1?75:100"></item-image>
				</view>
				<template v-if="!data.isEmpty">
					<view class="u-font-28 text-order-time">{{data.nickname || ''}}</view>
					<view class="u-flex u-row-center u-margin-top-32 u-margin-bottom-14">
						<image-number :number="data.total" type="1" size="40"></image-number>
						<view class="u-margin-left-20" v-if="trend">
							<trend :trend="data.trend"></trend>
						</view>
					</view>
					<view class="u-font-24 u-margin-top-10 content-desc-item">{{numName}}</view>
				</template>
			</view>
		</view>
		<!-- <view v-if="winnerList.length===1" class=" u-text-center fanOne  once"
			@click="detail(winnerList[0])">
			<view class="u-padding-top-30">
				<u-icon name="huangguan" custom-prefix="custom-icon" :color="iconColor(1)" size="38"></u-icon>
			</view>
			<view class="acvter u-flex u-row-center">
				<item-image type="1" :img="winnerList[0].avatar" :size="100"></item-image>
			</view>
			<view class="u-font-28 text-order-time">{{winnerList[0].nickname}}</view>
			<view class="u-flex u-row-center u-margin-top-32 u-margin-bottom-14">
				<image-number :number="winnerList[0].total" type="1" size="40"></image-number>
				<view class="u-margin-left-20" v-if="trend">
					<trend :trend="winnerList[0].trend"></trend>
				</view>
			</view>
			<view class="u-font-24 u-margin-top-10  content-desc-item">{{numName}}</view>
		</view> -->
	</view>
	
</template>

<script>
	import imageNumber from '@/components/imageNumber/imageNumber.vue'
	import trend from '@/pagesA/acomponents/ranking/trend.vue'
	export default {
		name: "rankKing",
		components: {
			trend,
			imageNumber
		},
		props: {
			winnerList: {
				type: Array,
				default: () => ([])
			},
			//是否显示上升或下降的图标
			trend:{
				type:Boolean,
				default:true
			},
			//显示的文字
			numName:{
				type:String,
				default:"势力值"
			}
		},
		computed: {
			// 如果没有数据则直接返回一个空对象占位
			dataList(){
				const list = [];
				if(this.winnerList.length===0){
					return list; //判断如果一个用户信息都没有则直接返回空
				}
				if(this.winnerList.length==1){
					return [{isEmpty:true},this.winnerList[0],{isEmpty:true}]
				}
				for (let index = 0; index < 3; index++) {
					const element = this.winnerList[index] || {
						isEmpty:true
					};
					list.push(element)
				}
				return list
			}
		},
		data() {
			return {

			};
		},
		methods: {
			iconColor(index) {
				return ['#BABABA', '#FFC436', '#BD8044'][index]
			},
			detail(item) {
				this.$emit('detail',item)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.acvter {
		border-radius: 50%;
		margin: 0 auto;
		position: relative;
		top: -12rpx;
		border: 1rpx solid ;
	}
	.avatar{
		&-small{
			width: 75rpx;
			height: 75rpx;
		}
		&-big{
			width: 100rpx;
			height: 100rpx;
		}
	}
	.fanOne {
		width: 226rpx;
		height: 360rpx;
		// background: url("../../static/images/myself/jin.png") no-repeat;
		background: white;
		border-radius: 10rpx;
		margin-right: 30rpx;

		&::after {
			background-color: #FFD369;
		}

		.huang {
			width: 38rpx;
			height: 34rpx;
		}
	}

	.fanpai {
		width: 200rpx;
		height: 320rpx;
		background: white;
		border-radius: 10rpx;

	}

	.fanThree {
		&::after {
			background-color: #BD8044;
		}
	}

	.ranking-king {
		background: url("http://larp-gbo.oss-cn-chengdu.aliyuncs.com/larp/common-light/rankingbg.png");
		background-size: 100% 100%;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 8rpx;
			border-radius: 10rpx 10rpx 0 0;
		}
	}

	.fanTwo {
		// background: url("../../static/images/myself/yin.png") no-repeat;
		background-size: 100% 100%;
		margin-right: 30rpx;

		&::after {
			background-color: #BABABA;
		}
	}

	.issue-ranking {
		padding-bottom: 180rpx;
	}

	.once {
		margin: 0 auto;
	}
</style>
